<template>
  <view class="elderly-management">
    <!-- 老人列表 -->
    <view class="elderly-list">
      <view class="elderly-card" v-for="(elderly, index) in elderlyList" :key="index">
        <view class="card-header">
          <view class="name-section">
            <text class="name-label">姓名：</text>
            <text class="name-value">{{ elderly.name || '无' }}</text>

          </view>
          <text class="detail-btn" @click="goToDetail(elderly, index)">详情 ></text>
        </view>

        <view class="info-grid">
          <view class="info-row">
            <view class="info-item">
              <text class="info-label">性别</text>
              <text class="info-value">{{ elderly.sex === 0 ? '女' : '男' }}</text>

            </view>
            <view class="info-item">
              <text class="info-label">年纪</text>
              <text class="info-value">{{ calculateAge(elderly.birthday) || '无' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">身份证号</text>
              <text class="info-value">{{ elderly.id_num || '无' }}</text>
            </view>
          </view>

          <view class="info-row">
            <view class="info-item">
              <text class="info-label">籍贯</text>
              <text class="info-value">{{ elderly.province || '无' }}</text>

            </view>
            <view class="info-item">
              <text class="info-label">婚姻状况</text>
              <text class="info-value">{{ getMaritalStatus(elderly.marray) || '无' }}</text>


            </view>
            <view class="info-item">
              <text class="info-label">既往病史</text>
              <text class="info-value">{{ elderly.history || '无' }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">过敏史</text>
              <text class="info-value">{{ elderly.mi_history || '无' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { apiGetOldmanList } from '@/request/api'
export default {
  data() {
    return {
      loading: false,
      elderlyList: [
        // {
        //   name: '陶玉成',
        //   gender: '男',
        //   age: '46',
        //   idNumber: '341230022139382',
        //   hometown: '上海市',
        //   maritalStatus: '丧偶',
        //   medicalHistory: '神经病',
        //   allergyHistory: '无'
        // },
        // {
        //   name: '陶玉成',
        //   gender: '男',
        //   age: '46',
        //   idNumber: '341230022139382',
        //   hometown: '上海市',
        //   maritalStatus: '丧偶',
        //   medicalHistory: '神经病',
        //   allergyHistory: '无'
        // },
        // {
        //   name: '陶玉成',
        //   gender: '男',
        //   age: '46',
        //   idNumber: '341230022139382',
        //   hometown: '上海市',
        //   maritalStatus: '丧偶',
        //   medicalHistory: '神经病',
        //   allergyHistory: '无'
        // }
      ]
    }
  },
  onLoad() {
    this.getOldmanList()
  },
  methods: {
    goToDetail(elderly, index) {
      // 跳转到详情页面，并传递老人数据
      uni.navigateTo({
        url: '/pages/elderly-detail/index?member_id=' + elderly.member_id
      })
    },
    async getOldmanList() {
      const res = await apiGetOldmanList({
        uid: 1,
        page: 1,
        limit: 10
      })
      this.elderlyList = res.data
    },
    // 计算年龄
    calculateAge(birthday) {
      if (!birthday || birthday === '0000-00-00') return '未知';
      const birth = new Date(birthday);
      const today = new Date();
      let age = today.getFullYear() - birth.getFullYear();
      const monthDiff = today.getMonth() - birth.getMonth();
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
        age--;
      }
      return age > 0 ? age.toString() : '未知';
    },

    // 获取婚姻状况
    getMaritalStatus(marray) {
      switch (marray) {
        case 1: return '未婚';
        case 2: return '已婚';
        case 3: return '离异';
        case 4: return '丧偶';
        default: return '未知';
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.elderly-management {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 页面标题 */
.header {
  background-color: #ffffff;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}

/* 老人列表 */
.elderly-list {
  padding: 20rpx;
}

.elderly-card {
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
}

.name-section {
  display: flex;
  align-items: center;
}

.name-label {
  font-size: 32rpx;
  color: #000000;
  font-weight: bold;
}

.name-value {
  font-size: 32rpx;
  color: #000000;
  font-weight: bold;
  margin-left: 10rpx;
}

.detail-btn {
  font-size: 28rpx;
  color: #999999;
}

/* 信息网格 */
.info-grid {
  display: flex;
  flex-direction: column;
  background: linear-gradient(0deg, #ffffff33 0%, #ffffff33 100%), #F9FAFB;
  gap: 30rpx;
  padding: 30rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.info-label {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 10rpx;
  display: block;
}

.info-value {
  font-size: 28rpx;
  color: #000000;
  font-weight: 500;
  display: block;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  display: flex;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.nav-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.nav-icon {
  font-size: 40rpx;
  color: #4D4D4D;
}

.nav-text {
  font-size: 24rpx;
  color: #4D4D4D;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-text {
  color: #FF6B6B;
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .info-row {
    flex-wrap: wrap;
  }

  .info-item {
    min-width: 120rpx;
  }
}
</style>